<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@include file="/WEB-INF/pages/common/taglibs.jsp"%>
<style>
<!--
.page {
	width: 24px;
	height: 24px;
	float: left;
	margin-left: 5px;
	vertical-align: middle;
	line-height: 24px;
	cursor: pointer;
	border: 1px solid silver;
}

.ellipsis {
	width: 24px;
	height: 24px;
	float: left;
	margin-left: 5px;
	vertical-align: middle;
	line-height: 24px;
}

#currentPage {
	background-color: #E4E4E4;
	cursor: text;
}

.query_data {
	height: 24px;
	float: left;
	margin-left: 5px;
	vertical-align: middle;
	line-height: 24px;
}

.button {
	width: 48px;
	height: 24px;
	float: left;
	margin-left: 5px;
	vertical-align: middle;
	line-height: 24px;
	border: 1px solid silver;
}
-->
</style>

<script type="text/javascript">
<!--
	function show(page) {
		$("input[name = 'page']").val(page);
		var form = document.forms[0];
		form.submit();
	}

	function previous() {
		var $page = $("input[name = 'page']");
		var page = parseInt($page.val());
		$page.val(page - 1);
		var form = document.forms[0];
		form.submit();
	}

	function next() {
		var $page = $("input[name = 'page']");
		var page = parseInt($page.val());
		$page.val(page + 1);
		var form = document.forms[0];
		form.submit();
	}

	$("document").ready(
			function() {
				var $pages = $(".page[id!='currentPage']");
				var original;
				var change = $("#currentPage").css("background-color");
				$pages.mouseout(function() {
					$(this).css("background-color", original);
				});
				$pages.mouseover(function() {
					original = $(this).css("background-color");
					$(this).css("background-color", change);
				});

				var $capacity = $("input[name='capacity']");
				$page = $("input[name='page']");

				$capacity.keydown(function(event) {
					if (!$capacity.attr("readOnly")) {
						if ((event.keyCode >= 48 && event.keyCode <= 57)
								|| event.keyCode == 8) {
							$page.val(1);
							$page.attr("readOnly", true);
							return true;
						} else if (event.keyCode == 13) {
							show(1);
						} else {
							return false;
						}
					}
				});
				$capacity.keyup(function(event) {
					if ($capacity.val() < 0) {
						$capacity.val(0);
					}
					if ($capacity.val() > 100) {
						$capacity.val(100);
					}
				});

				$page.keydown(function(event) {
					if (!$page.attr("readOnly")) {
						if ((event.keyCode >= 48 && event.keyCode <= 57)
								|| event.keyCode == 8) {
							$capacity.attr("readOnly", true);
							return true;
						} else if (event.keyCode == 13) {
							var form = document.forms[0];
							form.submit();
						} else {
							return false;
						}
					}
				});

				var max = parseInt($("input[name='max']").val());
				$page.keyup(function(event) {
					if ($page.val() < 1) {
						$page.val(1);
					}
					if ($page.val() > max) {
						$page.val(max);
					}
				});
			});
//-->
</script>

<s:set name="flag">
	true
</s:set>
<div id="paging" style="width: 100%; height: 24px; margin-top: 10px; margin-bottom: 10px; float: left; text-align: center;">
	<s:hidden name="type" />
	<s:if test="#request.total != 0 && #request.capacity != 0">
		<s:if test="#request.page == 1">
			<div class="button">上一页</div>
		</s:if>
		<s:else>
			<div class="button page" onclick="javascript:previous();">上一页</div>
		</s:else>
		<s:iterator begin="1" end="#request.total/#request.capacity + 1" var="number">
			<s:if test="#request.page == #number">
				<div id="currentPage" class="page">${number }</div>
				<s:set name="flag" scope="request">
					true
				</s:set>
			</s:if>
			<s:else>
				<s:if test="#number in {1,#request.total/#request.capacity + 1}">
					<div class="page" onclick="show('${number}')">${number }</div>
					<s:set name="flag" scope="request">
					true
				</s:set>
				</s:if>
				<s:elseif test="#number - #request.page in {1,2,3,-1,-2,-3}">
					<div class="page" onclick="show('${number}')">${number }</div>
					<s:set name="flag" scope="request">
					true
				</s:set>
				</s:elseif>
				<s:else>
					<s:if test="#request.flag == 'true'">
						<div class="ellipsis">...</div>
						<s:set name="flag" scope="request">
						false
					</s:set>
					</s:if>
				</s:else>
			</s:else>
		</s:iterator>
		<s:if test="#request.page == #request.total/#request.capacity + 1">
			<div class="button">下一页</div>
		</s:if>
		<s:else>
			<div class="button page" onclick="javascript:next();">下一页</div>
		</s:else>
	</s:if>
	<div class="query_data">
		<s:hidden name="max" value="%{#request.total/#request.capacity + 1}" disabled="true" />
		跳转到第
		<s:textfield name="page" cssStyle="text-align:center;" size="1" title="取值范围:1 ~ %{#request.total/#request.capacity + 1},按下Enter键快速跳转" />
		页 |每页显示
		<s:textfield name="capacity" cssStyle="text-align:center;" size="1" title="取值范围:0 ~ 100,按下Enter键快速查询" />
		条 <input type="submit" value="确定" style="width: 50px; height: 24px;" />
	</div>
</div>
